<template>
    <div>
        <titleBar title="位置"/>
		<div id="container"></div>
		<div class="address">
			<h3 id="title">定位中</h3>
			<p id="address">定位中</p>
		</div>
    </div>
</template>
<script>
import titleBar from '@/components/title_bar/index.vue'
import {clockInDistance} from '@/pages/clockIn/constant.js'
import {AMAPKEY} from '@/utils/amap.js'
import {getuserUid,getUserLogin} from '@/utils/auth.js'

let map = "";
let posi = [];
let loadMap = (site) => {
	//加载地图
    let params = {
        zoom: 16,
		center:posi
    }
    map = new AMap.Map('container', params);
	//标记
	var marker = new AMap.Marker({
		position:posi//位置
	});
	//根据经纬度得到地址
	AMap.service('AMap.Geocoder',function() {//回调函数
		let geocoder = new AMap.Geocoder({
			radius: 1000,  //半径范围
            extensions: "all" //返回街道所有信息
		});
		geocoder.getAddress(posi, function (status, result) {
			//success
			if (status === 'complete' && result.info === 'OK') {
				console.log(result);
				console.log(result.regeocode.formattedAddress);
				let oTitle = document.getElementById('title');
				let oAddress = document.getElementById('address');
				oTitle.innerHTML = result.regeocode.pois[0].name;
				oAddress.innerHTML = result.regeocode.formattedAddress;
			} 
			//error
			else {
				console.log('获取地址失败');
			}
		});
	})
	map.add(marker);
}
window.map_callback = () => {
    initAMapUI()
    loadMap()    
}
export default {
    components: {
        titleBar
    },
    data(){
        return {
			key:'',
        }
    },
    created(){
		//posi[0] = this.$route.query.x;
		//posi[1] = this.$route.query.y;
		this.key = AMAPKEY;
		posi = this.$route.query.position;
    },
	mounted(){
		this.initAmap();
	},
    methods: {
		send(){
			if(posi.length == 0){
				this.$toast('发送失败');
			}
			else{
				console.log(posi);
				var obj = getUserLogin(); 
				HTTP('msg',{
					content:posi,
					userUid:getuserUid(),
					groupUid:this.$route.query.id,
					ext:{
						type:'map',
						name:obj.userName,
						photoUrl:obj.pictureUrl,
						content:posi
					}
					
				})
				.then(res=>{
					if(res.code == 200){
						console.log('发送成功');
					}
					else{
						this.$toast(res.msg);
					}
				})
			}
		},
		//初始化地图
        initAmap(){
            if(window.scriptID){
                window.map_callback()
                console.log('已加载成功')
                return
			}
			var scriptID = 'map_amp_ID'
			var amapUIJs = document.createElement('script')
			amapUIJs.src = 'https://webapi.amap.com/ui/1.0/main-async.js'
			document.body.appendChild(amapUIJs)
			amapUIJs.onload = () => {
				var scriptUrl = `https://webapi.amap.com/maps?v=1.4.13&key=${this.key}&callback=map_callback`
				var script = document.createElement('script')
				script.id = scriptID
				script.src = scriptUrl
				document.body.appendChild(script)
			}
			window.scriptID = scriptID
        },
    },
}
</script>
<style lang="scss" scoped>
	#container{
		width: 100%;
		height: calc(100vh - 2.3rem);
	}
	.address{
		width: 100%;
		height: 1rem;
		background-color: #fff;
		padding: 0.2rem 0;
		#title{
			width: 95%;
			font-size: $fz-4;
			margin: 0 auto;
			word-wrap: normal;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		#address{
			width: 95%;
			white-space:pre-wrap;
			color: #666;
			margin: 0 auto;
			padding: 2px 0;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}
</style>
